<template>
  <div class="container">
    <div class="container-page2">
      <div class="top-tab">
        <img src="../../../assets/jiantou.png" alt="" />
        <!-- <span
          v-for="it in ltklist"
          :key="it.id"
          :class="ltkactive.id == it.id ? 'ltkactive' : ''"
          @click="changeLtk(it)"
        >
          {{ it.name }}
        </span> -->
        <el-button
          type="text"
          icon="el-icon-refresh"
          style="font-size: 0.16rem"
          @click="getHwList"
        >
          更新货位状态
        </el-button>
        <span style="margin: 0 0 0 0.3rem; color: #66b1ff">滚动至：</span>
        <el-button
          type="text"
          style="font-size: 0.16rem"
          @click="goAnchor('one')"
        >
          一层
        </el-button>
        <el-button
          type="text"
          style="font-size: 0.16rem"
          @click="goAnchor('two')"
        >
          二层
        </el-button>
        <el-button
          type="text"
          style="font-size: 0.16rem"
          @click="goAnchor('three')"
        >
          三层
        </el-button>
        <el-button
          type="text"
          style="font-size: 0.16rem"
          @click="goAnchor('four')"
        >
          四层
        </el-button>
        <el-button
          type="text"
          style="font-size: 0.16rem"
          @click="goAnchor('five')"
        >
          五层
        </el-button>
        <!-- <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            多选更新货位
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(ltkitem, index) in LtkZtList"
              :key="index"
              :command="ltkitem.type"
            >
              {{ ltkitem.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button
          type="text"
          icon="el-icon-refresh"
          style="font-size: 0.16rem"
          @click="clearOpen"
        >
          取消多选
        </el-button> -->
      </div>
      <div class="container-page2-center">
        <div id="hwList" class="container-page2-center-right">
          <div
            style="
              margin-left: 1rem;
              color: #fff;
              line-height: 0.5rem;
              display: flex;
            "
          >
            <!-- <span>当前选择:{{ ltkactive.name }}</span> -->
            <div class="container-page2-center-left">
              <!-- 原版 -->
              <span v-for="(ltkitem, index) in LtkZtListShow" :key="index">
                <span
                  class="ltkanli"
                  :style="{
                    background: ltkitem.color,
                    border:
                      index == 0 || index == 1 || index == 2 || index == 3
                        ? '1px solid rgb(0, 140, 230)'
                        : '',
                  }"
                ></span>
                {{ ltkitem.name }}
              </span>
              <!-- 实行版 -->
            </div>
          </div>
          <div v-if="ltkactive.id != 2" class="page2-ltkshow-all">
            <div v-if="ltkactive.id == 0" ref="ltkshowall" class="lxltk-page1">
              <div id="one" ref="ltkshow" class="page2-ltkshow">
                <div
                  class="pai"
                  style="
                    height: 100%;
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    border: 1px solid #215a9f;
                    padding: 0 20px;
                  "
                >
                  第一层
                </div>
                <div
                  v-for="(item, index) in LtkListdata"
                  :key="index"
                  class="lie"
                >
                  <div
                    v-for="(it, indexs) in LtkListdata[index]"
                    :key="indexs"
                    class="hang"
                    :style="
                      (index == 0 && indexs == 0) || (index == 0 && indexs == 6)
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: 'transparent',
                          }
                        : index == 0 || indexs == 0
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: '#008CE6',
                          }
                        : {
                            width:
                              it.huoweifl == 1
                                ? LtkOneKuan + 'px'
                                : (LtkOneKuan / 3) * 2 + 'px',
                            height: LtkOneChang + 'px',
                            border:
                              it != undefined && selectSpan.indexOf(it.id) != -1
                                ? '1px solid red'
                                : it && it.huoweizt
                                ? '1px solid #008CE6'
                                : '',
                            background: it.huoweizt
                              ? it.guajiashuliang == 1 && it.huoweizt == 2
                                ? LtkZtList[5].color
                                : it.guajiashuliang == 2 && it.huoweizt == 2
                                ? LtkZtList[6].color
                                : it.guajiashuliang >= 3 && it.huoweizt == 2
                                ? LtkZtList[1].color
                                : LtkZtList[Number(it.huoweizt) - 1].color
                              : 'transparent',
                          }
                    "
                    @click.right="showLTKdetail($event, it, 1, index, indexs)"
                    @dblclick="dbclickGJ(it)"
                    @click="
                      (val) => {
                        danjiSelect(val, it)
                      }
                    "
                  >
                    <span
                      :style="{
                        width: LtkOneKuan + 'px',
                        height: LtkOneChang + 'px',
                        fontWeight: 'bold',
                      }"
                      @mouseleave="onHide"
                    >
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0
                          ? it
                          : ''
                      }}
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0 || indexs == 6
                          ? ''
                          : it.huoweifl == 1
                          ? LtkListdata[index][indexs].huoweibh
                          : it.huoweifl == 2
                          ? LtkListdata[index][indexs].huoweibh
                          : it == '出入口'
                          ? it
                          : ''
                      }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="quweiname"></div>
              <div id="two" ref="ltkshow" class="page2-ltkshow">
                <div
                  class="pai"
                  style="
                    height: 100%;
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    border: 1px solid #215a9f;
                    padding: 0 20px;
                  "
                >
                  第二层
                </div>
                <div
                  v-for="(item, index) in LtkListdata2"
                  :key="index"
                  class="lie"
                >
                  <div
                    v-for="(it, indexs) in LtkListdata2[index]"
                    :key="indexs"
                    class="hang"
                    :style="
                      (index == 0 && indexs == 0) || (index == 0 && indexs == 6)
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: 'transparent',
                          }
                        : index == 0 || indexs == 0
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: '#008CE6',
                          }
                        : {
                            width:
                              it.huoweifl == 1
                                ? LtkOneKuan + 'px'
                                : (LtkOneKuan / 3) * 2 + 'px',
                            height: LtkOneChang + 'px',
                            border:
                              it != undefined && selectSpan.indexOf(it.id) != -1
                                ? '1px solid red'
                                : it && it.huoweizt
                                ? '1px solid #008CE6'
                                : '',
                            background: it.huoweizt
                              ? it.guajiashuliang == 1 && it.huoweizt == 2
                                ? LtkZtList[5].color
                                : it.guajiashuliang == 2 && it.huoweizt == 2
                                ? LtkZtList[6].color
                                : it.guajiashuliang >= 3 && it.huoweizt == 2
                                ? LtkZtList[1].color
                                : LtkZtList[Number(it.huoweizt) - 1].color
                              : 'transparent',
                          }
                    "
                    @click.right="showLTKdetail($event, it, 1, index, indexs)"
                    @dblclick="dbclickGJ(it)"
                    @click="
                      (val) => {
                        danjiSelect(val, it)
                      }
                    "
                  >
                    <span
                      :style="{
                        width: LtkOneKuan + 'px',
                        height: LtkOneChang + 'px',
                        fontWeight: 'bold',
                      }"
                      @mouseleave="onHide"
                    >
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0
                          ? it
                          : ''
                      }}
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0 || indexs == 6
                          ? ''
                          : it.huoweifl == 1
                          ? LtkListdata2[index][indexs].huoweibh
                          : it.huoweifl == 2
                          ? LtkListdata2[index][indexs].huoweibh
                          : it == '出入口'
                          ? it
                          : ''
                      }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="quweiname"></div>
              <div id="three" ref="ltkshow" class="page2-ltkshow">
                <div
                  class="pai"
                  style="
                    height: 100%;
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    border: 1px solid #215a9f;
                    padding: 0 20px;
                  "
                >
                  第三层
                </div>
                <div
                  v-for="(item, index) in LtkListdata3"
                  :key="index"
                  class="lie"
                >
                  <div
                    v-for="(it, indexs) in LtkListdata3[index]"
                    :key="indexs"
                    class="hang"
                    :style="
                      (index == 0 && indexs == 0) || (index == 0 && indexs == 6)
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: 'transparent',
                          }
                        : index == 0 || indexs == 0
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: '#008CE6',
                          }
                        : {
                            width:
                              it.huoweifl == 1
                                ? LtkOneKuan + 'px'
                                : (LtkOneKuan / 3) * 2 + 'px',
                            height: LtkOneChang + 'px',
                            border:
                              it != undefined && selectSpan.indexOf(it.id) != -1
                                ? '1px solid red'
                                : it && it.huoweizt
                                ? '1px solid #008CE6'
                                : '',
                            background: it.huoweizt
                              ? it.guajiashuliang == 1 && it.huoweizt == 2
                                ? LtkZtList[5].color
                                : it.guajiashuliang == 2 && it.huoweizt == 2
                                ? LtkZtList[6].color
                                : it.guajiashuliang >= 3 && it.huoweizt == 2
                                ? LtkZtList[1].color
                                : LtkZtList[Number(it.huoweizt) - 1].color
                              : 'transparent',
                          }
                    "
                    @click.right="showLTKdetail($event, it, 1, index, indexs)"
                    @dblclick="dbclickGJ(it)"
                    @click="
                      (val) => {
                        danjiSelect(val, it)
                      }
                    "
                  >
                    <span
                      :style="{
                        width: LtkOneKuan + 'px',
                        height: LtkOneChang + 'px',
                        fontWeight: 'bold',
                      }"
                      @mouseleave="onHide"
                    >
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0
                          ? it
                          : ''
                      }}
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0 || indexs == 6
                          ? ''
                          : it.huoweifl == 1
                          ? LtkListdata3[index][indexs].huoweibh
                          : it.huoweifl == 2
                          ? LtkListdata3[index][indexs].huoweibh
                          : it == '出入口'
                          ? it
                          : ''
                      }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="quweiname"></div>
              <div id="four" ref="ltkshow" class="page2-ltkshow">
                <div
                  class="pai"
                  style="
                    height: 100%;
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    border: 1px solid #215a9f;
                    padding: 0 20px;
                  "
                >
                  第四层
                </div>
                <div
                  v-for="(item, index) in LtkListdata4"
                  :key="index"
                  class="lie"
                >
                  <div
                    v-for="(it, indexs) in LtkListdata4[index]"
                    :key="indexs"
                    class="hang"
                    :style="
                      (index == 0 && indexs == 0) || (index == 0 && indexs == 6)
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: 'transparent',
                          }
                        : index == 0 || indexs == 0
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: '#008CE6',
                          }
                        : {
                            width:
                              it.huoweifl == 1
                                ? LtkOneKuan + 'px'
                                : (LtkOneKuan / 3) * 2 + 'px',
                            height: LtkOneChang + 'px',
                            border:
                              it != undefined && selectSpan.indexOf(it.id) != -1
                                ? '1px solid red'
                                : it && it.huoweizt
                                ? '1px solid #008CE6'
                                : '',
                            background: it.huoweizt
                              ? it.guajiashuliang == 1 && it.huoweizt == 2
                                ? LtkZtList[5].color
                                : it.guajiashuliang == 2 && it.huoweizt == 2
                                ? LtkZtList[6].color
                                : it.guajiashuliang >= 3 && it.huoweizt == 2
                                ? LtkZtList[1].color
                                : LtkZtList[Number(it.huoweizt) - 1].color
                              : 'transparent',
                          }
                    "
                    @click.right="showLTKdetail($event, it, 1, index, indexs)"
                    @dblclick="dbclickGJ(it)"
                    @click="
                      (val) => {
                        danjiSelect(val, it)
                      }
                    "
                  >
                    <span
                      :style="{
                        width: LtkOneKuan + 'px',
                        height: LtkOneChang + 'px',
                        fontWeight: 'bold',
                      }"
                      @mouseleave="onHide"
                    >
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0
                          ? it
                          : ''
                      }}
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0 || indexs == 6
                          ? ''
                          : it.huoweifl == 1
                          ? LtkListdata4[index][indexs].huoweibh
                          : it.huoweifl == 2
                          ? LtkListdata4[index][indexs].huoweibh
                          : it == '出入口'
                          ? it
                          : ''
                      }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="quweiname"></div>
              <div id="five" ref="ltkshow" class="page2-ltkshow">
                <div
                  class="pai"
                  style="
                    height: 100%;
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    border: 1px solid #215a9f;
                    padding: 0 20px;
                  "
                >
                  第五层
                </div>
                <div
                  v-for="(item, index) in LtkListdata5"
                  :key="index"
                  class="lie"
                >
                  <div
                    v-for="(it, indexs) in LtkListdata5[index]"
                    :key="indexs"
                    class="hang"
                    :style="
                      (index == 0 && indexs == 0) || (index == 0 && indexs == 6)
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: 'transparent',
                          }
                        : index == 0 || indexs == 0
                        ? {
                            width: ZuobiaoKuan,
                            height: ZuobiaoChang,
                            backgroundColor: '#008CE6',
                          }
                        : {
                            width:
                              it.huoweifl == 1
                                ? LtkOneKuan + 'px'
                                : (LtkOneKuan / 3) * 2 + 'px',
                            height: LtkOneChang + 'px',
                            border:
                              it != undefined && selectSpan.indexOf(it.id) != -1
                                ? '1px solid red'
                                : it && it.huoweizt
                                ? '1px solid #008CE6'
                                : '',
                            background: it.huoweizt
                              ? it.guajiashuliang == 1 && it.huoweizt == 2
                                ? LtkZtList[5].color
                                : it.guajiashuliang == 2 && it.huoweizt == 2
                                ? LtkZtList[6].color
                                : it.guajiashuliang >= 3 && it.huoweizt == 2
                                ? LtkZtList[1].color
                                : LtkZtList[Number(it.huoweizt) - 1].color
                              : 'transparent',
                          }
                    "
                    @click.right="showLTKdetail($event, it, 1, index, indexs)"
                    @dblclick="dbclickGJ(it)"
                    @click="
                      (val) => {
                        danjiSelect(val, it)
                      }
                    "
                  >
                    <span
                      :style="{
                        width: LtkOneKuan + 'px',
                        height: LtkOneChang + 'px',
                        fontWeight: 'bold',
                      }"
                      @mouseleave="onHide"
                    >
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0
                          ? it
                          : ''
                      }}
                      {{
                        (index == 0 && indexs == 0) ||
                        (index == 0 && indexs == 6)
                          ? ''
                          : index == 0 || indexs == 0 || indexs == 6
                          ? ''
                          : it.huoweifl == 1
                          ? LtkListdata5[index][indexs].huoweibh
                          : it.huoweifl == 2
                          ? LtkListdata5[index][indexs].huoweibh
                          : it == '出入口'
                          ? it
                          : ''
                      }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 弹窗 -->
        <div
          ref="titleRef"
          class="m-title"
          :class="{ 'show-tip': visible }"
          :style="`max-width: 240px;width:1.2rem; top: ${top}px; left: ${left}px;display:${show}`"
          @mouseenter="onShow"
          @mouseleave="onHide"
        >
          <div class="u-title">
            <!-- <slot name="title"> -->
            <template>
              <div class="tooltip-btn">
                <ul>
                  <li
                    v-for="(a, index) in gnListBtn"
                    :key="index"
                    :class="btnactive == index ? 'btnactive' : ''"
                  >
                    <el-button type="text" @click="LTKcaozuo(a)">
                      {{ a.name }}
                    </el-button>
                  </li>
                </ul>
              </div>
            </template>
            <!-- </slot> -->
          </div>
        </div>
        <el-dialog
          title="货位挂架"
          :visible.sync="dialogTableVisible"
          destroy-on-close
          :append-to-body="true"
        >
          <el-table :data="gridData">
            <el-table-column
              property="mingcheng"
              label="挂架名称"
            ></el-table-column>
            <el-table-column property="xingbie" label="型别"></el-table-column>
            <el-table-column
              property="chuchanghm"
              label="出厂号码"
            ></el-table-column>
            <el-table-column
              property="weiyibm"
              label="唯一编码"
            ></el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  import Tooltip from './Tooltip.vue'
  import { mapGetters, mapActions } from 'vuex'
  import { getLtkShowList, updateLtkStatus } from '@/api/taishi'
  import { getHuoWeiallUser, getTuoPanWuzi, getTuoPanALL } from '@/api/biaozhun'
  import { queryguajiaList } from '@/api/kunei'
  import { queryHuoWeiList } from '@/api/cangkujichu'
  export default {
    name: 'LtkShowList',
    components: { Tooltip },
    props: {
      showIndex: {
        type: Number,
        default: 0,
        required: true,
      },
      TPList: {
        type: Array,
        default: [],
      },
      LXList: {
        type: Array,
        default: [],
      },
      newHuowei: {
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        ltkactive: {
          id: 0,
          name: '料箱立体库1-2排',
        },
        ltklist: [
          { id: 0, name: '料箱立体库1-2排' },
          { id: 1, name: '料箱立体库3-4排' },
          { id: 2, name: '托盘立体库' },
        ],
        LtkZtList: [
          { name: '空闲', color: 'transparent', type: 1 },
          {
            name: '负载',
            color: '#00C6DD',
            type: 2,
          },
          { name: '锁定', color: '#FFA500', type: 3 },
          { name: '异常', color: '#FF6A6A', type: 4 },
          { name: '禁用', color: '#4d5c70', type: 5 },
          {
            name: '1/3负载',
            color:
              'linear-gradient(to top, #00C6DD 0%,#00C6DD 33%,transparent 33%,transparent 100%)',
            type: 6,
          },
          {
            name: '2/3负载',
            color:
              'linear-gradient(to top, #00C6DD 0%,#00C6DD 67%,transparent 67%,transparent 100%)',
            type: 7,
          },
        ],
        LtkZtListShow: [
          { name: '空闲', color: 'transparent', type: 1 },
          {
            name: '1/3负载',
            color:
              'linear-gradient(to top, #00C6DD 0%,#00C6DD 33%,transparent 33%,transparent 100%)',
            type: 2,
          },
          {
            name: '2/3负载',
            color:
              'linear-gradient(to top, #00C6DD 0%,#00C6DD 67%,transparent 67%,transparent 100%)',
            type: 6,
          },
          {
            name: '负载',
            color: '#00C6DD',
            type: 7,
          },
          { name: '锁定', color: '#FFA500', type: 3 },
          { name: '异常', color: '#FF6A6A', type: 4 },
          { name: '禁用', color: '#4d5c70', type: 5 },
        ],
        // LtkZtList: [],
        LtkListdata: [],
        LtkListdata2: [],
        LtkListdata3: [],
        LtkListdata4: [],
        LtkListdata5: [],
        LtkListdata6: [],
        LtkListdatarows: [],
        LtkListdata2rows: [],
        LtkListdata3rows: [],
        LtkListdata4rows: [],
        LtkListdata5rows: [],
        LtkListdata6rows: [],
        LtkOneKuan: 0,
        LtkOneChang: 0,
        ZuobiaoKuan: 0,
        ZuobiaoChang: 0,
        visible: false,
        // gnListBtn: [{ name: '入库', type: 0 }, { name: '出库', type: 1 }, { name: '锁定', type: 2 }, { name: '报废', type: 3 }, { name: '启用', type: 4 }, { name: '负载', type: 5 }, { name: '全满', type: 6 }],
        btnactive: 0,
        gnListBtn: [
          { name: '货位挂架', type: 99 },
          { name: '空闲', type: 1 },
          { name: '1/3负载', type: 6 },
          { name: '2/3负载', type: 7 },
          { name: '负载', type: 2 },
          { name: '锁定', type: 3 },
          { name: '异常', type: 4 },
          { name: '禁用', type: 5 },
        ],
        hideTimer: null,
        top: 0, // 提示框top定位
        left: 0, // 提示框left定位
        selsectLtk: null,
        show: '',
        ltkpageIndex: 0,
        floor: 8, //层数,
        CaozuoLTKone: {}, //右键选中的立体库
        newLXList: [],
        newTPList: [],
        gridData: [],
        dialogTableVisible: false,
        selectSpan: [],
        selectSpanItem: [],
        ShownewHuowei: [],
      }
    },
    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
      }),
    },
    watch: {
      ltkactive: {
        handler(val) {
          if (this.showIndex != 0) {
            this.LtkOneKuan = 0
            this.LtkOneChang = 0
            this.ZuobiaoKuan = 0
            this.ZuobiaoChang = 0
            this.$nextTick(() => {
              if (val.id != 2) {
                // val.id == 0
                //   ? this.drawLTK('Ltkcanvas')
                //   : this.drawLTK('Ltkcanvas2')
                this.LtkOneKuan =
                  Math.floor((this.$refs.ltkshow.offsetWidth - 240) / 7) - 6
                this.LtkOneChang =
                  window.innerWidth >= 1920
                    ? Math.floor((this.$refs.ltkshow.offsetWidth - 240) / 27) -
                      6
                    : Math.floor(this.$refs.ltkshow.offsetHeight / 2)
                this.ZuobiaoKuan =
                  Math.floor((this.$refs.ltkshow.offsetWidth - 240) / 7) -
                  6 +
                  'px'
                this.ZuobiaoChang =
                  window.innerWidth >= 1920
                    ? Math.floor((this.$refs.ltkshow.offsetWidth - 240) / 27) -
                      4 +
                      'px'
                    : Math.floor(this.$refs.ltkshow.offsetHeight / 2) + 2 + 'px'
              } else {
                // this.drawLTKTP('LtkcanvasTp')
                this.LtkOneKuan =
                  Math.floor((this.$refs.ltkshowTp.offsetWidth - 240) / 11) - 6
                this.LtkOneChang =
                  Math.floor((this.$refs.ltkshowTp.offsetWidth - 240) / 11) - 6
                this.ZuobiaoKuan =
                  Math.floor((this.$refs.ltkshowTp.offsetWidth - 240) / 11) - 6
                this.ZuobiaoChang =
                  Math.floor((this.$refs.ltkshowTp.offsetWidth - 240) / 11) - 6
              }
            })
          }
        },
        deep: true,
        immediate: true,
      },
      newHuowei: {
        handler(val) {
          this.ShownewHuowei = val
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.newLXList = this.LXList
      this.newTPList = this.TPList
      // this.LtkZtList = this.$util.getHwzt()
      this.AllshowHw()
    },
    mounted() {
      // this.getPosition()
      // let { data } = await getLtkShowList({})
      // data.forEach(item => {
      //   let mingcheng = item.mingcheng.split('-')[0]
      //   if (mingcheng == '01') {
      //     this.LtkListdatarows.push(item)
      //   }
      // })
    },
    methods: {
      ...mapActions({
        openSideBar: 'settings/openSideBar',
        foldSideBar: 'settings/foldSideBar',
        changeShowIndex: 'settings/changeShowIndex',
      }),
      async handleCommand(command) {
        this.$message('click on item ' + command)
        let promises = []
        for (let i = 0; i < this.selectSpan.length; i++) {
          let formdata = {
            id: this.selectSpan[i],
            huoweizt: command,
          }
          promises.push(updateLtkStatus(formdata))
        }
        let results = await Promise.all(promises)
        results.forEach((item, indexs) => {
          if (item.code == '200') {
            this.$forceUpdate()
          }
        })
        this.$message({
          message: '更新成功',
          type: 'success',
        })
        this.getHwList()
      },
      clearOpen() {
        this.selectSpan = []
      },
      danjiSelect(e, item) {
        if (e.ctrlKey == true && item.id != undefined) {
          this.selectSpan.push(item.id)
        } else if (e.ctrlKey == false && item.id != undefined) {
          this.selectSpan = []
          this.selectSpan.push(item.id)
        }
      },
      //创建所有货位数据
      AllshowHw() {
        this.createData()
        this.createData2()
        this.createData3()
        this.createData4()
        this.createData5()
      },
      //获取货位数据
      async getHwList() {
        // let { data } = await queryHuoWeiList({})
        let that = this
        var promiseArr = []
        for (let index = 1; index < 6; index++) {
          let p = new Promise((resolve, reject) => {
            queryHuoWeiList(
              Object.assign({
                ceng: index,
              })
            )
              .then((res) => {
                resolve(res)
              })
              .catch((err) => {
                reject(err)
              })
          })
          promiseArr.push(p)
        }
        Promise.all(promiseArr)
          .then((res) => {
            that.$emit('newHuowei', {
              ceng1: res[0].data,
              ceng2: res[1].data,
              ceng3: res[2].data,
              ceng4: res[3].data,
              ceng5: res[4].data,
            })
            that.ShownewHuowei = {
              ceng1: res[0].data,
              ceng2: res[1].data,
              ceng3: res[2].data,
              ceng4: res[3].data,
              ceng5: res[4].data,
            }
            that.$nextTick(() => {
              that.AllshowHw()
            })
            that.$forceUpdate()
          })
          .catch((err) => {
            console.log(err)
          })
        console.log(that.ShownewHuowei)

        that.AllshowHw()
      },
      //改变料箱展示页面
      changelxltkIndex(data) {
        this.ltkpageIndex = data
      },
      LTkopenSideBar() {
        this.openSideBar()
      },
      dbclickGJ(item) {
        queryguajiaList({ huoweiid: item.id }).then((res) => {
          if (res.code == '200') {
            this.gridData = res.data
          }
        })

        this.dialogTableVisible = true
      },
      //立体库操作弹窗按钮
      async LTKcaozuo(a) {
        switch (a.type) {
          case 99:
            queryguajiaList({ huoweiid: this.CaozuoLTKone.id }).then((res) => {
              if (res.code == '200') {
                this.gridData = res.data
              }
            })

            this.dialogTableVisible = true
            break
          case 0:
            if (
              this.CaozuoLTKone.huoweizt == '1' ||
              this.CaozuoLTKone.huoweizt == '2'
            ) {
              this.$message({
                type: 'warning',
                message: '当前该货位处于启用状态，请勿重复启用',
              })
              return
            } else if (
              this.CaozuoLTKone.huoweizt == '6' ||
              this.CaozuoLTKone.huoweizt == '7'
            ) {
              this.$message({
                type: 'warning',
                message: '当前货位只允许自动更新或设置异常状态',
              })
              return
            } else {
              this.updateLtkStatus('0')
            }
            break
          case 1:
            if (
              this.CaozuoLTKone.huoweizt == '6' ||
              this.CaozuoLTKone.huoweizt == '7'
            ) {
              this.$message({
                type: 'warning',
                message: '当前货位只允许自动更新或设置异常状态',
              })
              return
            } else {
              this.updateLtkStatus('1')
            }
            break
          case 2:
            if (
              this.CaozuoLTKone.huoweizt == '6' ||
              this.CaozuoLTKone.huoweizt == '7'
            ) {
              this.$message({
                type: 'warning',
                message: '当前货位只允许自动更新或设置异常状态',
              })
              return
            } else {
              this.updateLtkStatus('2')
            }
            break
          case 3:
            this.$confirm('是否将该货位设置为锁定状态？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              this.updateLtkStatus('3')
            })
            break
          case 4:
            this.$confirm('是否将该货位设置为异常状态？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              this.updateLtkStatus('4')
            })
            break
          case 5:
            this.$confirm('是否将该货位设置为禁用状态？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              this.updateLtkStatus('5')
            })
            break
          case 6:
            this.updateLtkStatus('2')
            break
          case 7:
            this.updateLtkStatus('2')
            break
        }
      },
      //更新立体库状态
      async updateLtkStatus(str) {
        if (str == this.CaozuoLTKone.huoweizt) {
          this.$message({
            message: '修改状态与当前状态相同，请勿重复修改',
            type: 'warning',
          })
          return
        }
        let formdata = {
          id: this.CaozuoLTKone.id,
          huoweizt: str,
        }
        let data = await updateLtkStatus(formdata)
        if (data.code == '200') {
          // this.getHwList()
          this.CaozuoLTKone.huoweizt = str
          this.$message({
            message: data.msg,
            type: 'success',
          })
          this.$forceUpdate()
        }
      },
      //弹窗
      getPosition(offsetTop, offsetLeft, offsetWidth, offsetHeight) {
        if (this.ltkactive.id == 0 || this.ltkactive.id == 1) {
          const scrollTop = this.$refs.ltkshowall.scrollTop
          const scrollLeft = this.$refs.ltkshowall.scrollLeft
          const targetTop = offsetTop - scrollTop
          const targetHeight = offsetHeight
          const targetLeft = offsetLeft - scrollLeft
          const targetRight = offsetWidth + offsetLeft
          const targetWidth = offsetWidth
          const titleWidth = this.$refs.titleRef.offsetWidth // 提示文本宽度
          const titleHeight = this.$refs.titleRef.offsetHeight // 提示文本高度
          if (targetTop + titleHeight * 2 - targetHeight > window.innerHeight) {
            this.top = targetTop - titleHeight * 0.5
          } else {
            this.top = targetTop + titleHeight * 0.5 - 35
          }
          if (targetRight + titleWidth > window.innerWidth) {
            this.left = targetLeft - (titleWidth - targetWidth) - 10
          } else {
            this.left = targetLeft - (titleWidth - targetWidth) / 2
          }
          this.left = this.collapse ? this.left : this.left + 300
        } else {
          const scrollTop = this.$refs.ltkshowallTp.scrollTop
          const scrollLeft = this.$refs.ltkshowallTp.scrollLeft
          const targetTop = offsetTop - scrollTop
          const targetHeight = offsetHeight
          const targetLeft = offsetLeft - scrollLeft
          const targetRight = offsetWidth + offsetLeft
          const targetWidth = offsetWidth
          const titleWidth = this.$refs.titleRef.offsetWidth // 提示文本宽度
          const titleHeight = this.$refs.titleRef.offsetHeight // 提示文本高度
          this.top = targetTop + titleHeight - offsetHeight * 2.5
          this.left = targetLeft + titleWidth
        }
      },
      onShow() {
        // this.getPosition()
        clearTimeout(this.hideTimer)
        this.visible = true
      },
      onHide() {
        this.hideTimer = setTimeout(() => {
          this.visible = false
        }, 400)
      },
      //托盘物资
      async getTuopanWuzi(item) {
        let data = {
          tuopanh: item.mingcheng,
        }
        let list = await getTuoPanALL(data)
        if (list && list.data.length > 0) {
          let wuzidata = {
            tuopanid: list.data[0].id,
          }
          let res = await getTuoPanWuzi(wuzidata)
        }
      },
      //展示立体库上边的弹窗
      showLTKdetail(e, it, pai, lie, hang) {
        if (!it.id) return
        this.CaozuoLTKone = it
        e.preventDefault()
        this.selsectLtk = e
        if (pai == 1) {
          if (lie == 0 || hang == 0) {
            this.visible = false
          } else {
            this.getPosition(
              e.target.offsetTop,
              e.target.offsetLeft,
              e.target.offsetWidth,
              e.target.offsetHeight
            )
            this.onShow()
          }
        } else {
          if (lie == 0) {
            this.visible = false
          } else {
            this.getPosition(
              e.target.offsetTop,
              e.target.offsetLeft,
              e.target.offsetWidth,
              e.target.offsetHeight
            )
            this.onShow()
          }
        }
      },
      //创建1-5层数据
      createData() {
        let pai = 0
        for (let i = 0; i < 7; i++) {
          this.LtkListdata[i] = new Array()
          // this.LtkListdata.push([])
          for (let j = 0; j < this.floor + 1; j++) {
            this.LtkListdata[i].push([])
            if (i > 0 && j == 0) {
              this.LtkListdata[i][0] = i
            } else if (i == 0) {
              this.LtkListdata[0][0] = 0
              this.LtkListdata[0][j] = Math.abs(this.floor - j + 1) + '排'
            } else if (i == 3 && j == this.floor) {
              this.LtkListdata[3][j] = '出入口'
            } else {
              for (let item of this.ShownewHuowei.ceng1) {
                if (
                  Number(item.ceng) == pai + 1 &&
                  Number(item.pai) == this.floor - j + 1 &&
                  Number(item.lie) == i
                ) {
                  this.LtkListdata[i][j] = item
                  break
                }
              }
            }
          }
          if (i == 0) {
            this.LtkListdata[i].splice(6, 0, null)
          } else {
            this.LtkListdata[i].splice(6, 0, '')
          }
        }
      },
      createData2() {
        let pai = 1
        for (let i = 0; i < 7; i++) {
          this.LtkListdata2[i] = new Array()
          for (let j = 0; j < this.floor + 1; j++) {
            this.LtkListdata2[i].push([])
            if (i > 0 && j == 0) {
              this.LtkListdata2[i][0] = i
            } else if (i == 0) {
              this.LtkListdata2[0][0] = 0
              this.LtkListdata2[0][j] = Math.abs(this.floor - j + 1) + '排'
            } else if (i == 3 && j == this.floor) {
              this.LtkListdata2[3][j] = '出入口'
            } else {
              for (let item of this.ShownewHuowei.ceng2) {
                if (
                  Number(item.ceng) == pai + 1 &&
                  Number(item.pai) == this.floor - j + 1 &&
                  Number(item.lie) == i
                ) {
                  this.LtkListdata2[i][j] = item
                  break
                }
              }
            }
          }
          if (i == 0) {
            this.LtkListdata2[i].splice(6, 0, null)
          } else {
            this.LtkListdata2[i].splice(6, 0, '')
          }
        }
      },
      createData3() {
        let pai = 2
        for (let i = 0; i < 7; i++) {
          this.LtkListdata3[i] = new Array()
          for (let j = 0; j < this.floor + 1; j++) {
            this.LtkListdata3[i].push([])
            if (i > 0 && j == 0) {
              this.LtkListdata3[i][0] = i
            } else if (i == 0) {
              this.LtkListdata3[0][0] = 0
              this.LtkListdata3[0][j] = Math.abs(this.floor - j + 1) + '排'
            } else if (i == 3 && j == this.floor) {
              this.LtkListdata3[3][j] = '出入口'
            } else {
              for (let item of this.ShownewHuowei.ceng3) {
                if (
                  Number(item.ceng) == pai + 1 &&
                  Number(item.pai) == this.floor - j + 1 &&
                  Number(item.lie) == i
                ) {
                  this.LtkListdata3[i][j] = item
                  break
                }
              }
            }
          }
          if (i == 0) {
            this.LtkListdata3[i].splice(6, 0, null)
          } else {
            this.LtkListdata3[i].splice(6, 0, '')
          }
        }
      },
      createData4() {
        let pai = 3
        for (let i = 0; i < 7; i++) {
          this.LtkListdata4[i] = new Array()
          for (let j = 0; j < this.floor + 1; j++) {
            this.LtkListdata4[i].push([])
            if (i > 0 && j == 0) {
              this.LtkListdata4[i][0] = i
            } else if (i == 0) {
              this.LtkListdata4[0][0] = 0
              this.LtkListdata4[0][j] = Math.abs(this.floor - j + 1) + '排'
            } else if (i == 3 && j == this.floor) {
              this.LtkListdata4[3][j] = '出入口'
            } else {
              for (let item of this.ShownewHuowei.ceng4) {
                if (
                  Number(item.ceng) == pai + 1 &&
                  Number(item.pai) == this.floor - j + 1 &&
                  Number(item.lie) == i
                ) {
                  this.LtkListdata4[i][j] = item
                  break
                }
              }
            }
          }
          if (i == 0) {
            this.LtkListdata4[i].splice(6, 0, null)
          } else {
            this.LtkListdata4[i].splice(6, 0, '')
          }
        }
      },
      createData5() {
        let pai = 4
        for (let i = 0; i < 7; i++) {
          this.LtkListdata5[i] = new Array()
          for (let j = 0; j < this.floor + 1; j++) {
            this.LtkListdata5[i].push([])
            if (i > 0 && j == 0) {
              this.LtkListdata5[i][0] = i
            } else if (i == 0) {
              this.LtkListdata5[0][0] = 0
              this.LtkListdata5[0][j] = Math.abs(this.floor - j + 1) + '排'
            } else if (i == 3 && j == this.floor) {
              this.LtkListdata5[3][j] = '出入口'
            } else {
              for (let item of this.ShownewHuowei.ceng5) {
                if (
                  Number(item.ceng) == pai + 1 &&
                  Number(item.pai) == this.floor - j + 1 &&
                  Number(item.lie) == i
                ) {
                  this.LtkListdata5[i][j] = item
                  break
                }
              }
            }
          }
          if (i == 0) {
            this.LtkListdata5[i].splice(6, 0, null)
          } else {
            this.LtkListdata5[i].splice(6, 0, '')
          }
        }
      },
      //创建托盘
      //创建数据
      createDataTP(pai, /*正序0，倒叙1*/ sort) {
        if (pai == 0 && sort == 1) {
          for (var i = 0; i < 11; i++) {
            this.LtkListdata5[i] = new Array()
            for (var j = 0; j < 3; j++) {
              if (i > 0 && j == 0) {
                this.LtkListdata5[i][0] = i
              } else if (i == 0) {
                this.LtkListdata5[0][j] = Math.abs(2 - j + 1) + '层'
                this.LtkListdata5[0][0] = 0
              } else {
                // var randNum = Math.random() * 15 + 0
                // if (randNum >= 5) {
                //   randNum = 0
                // }
                // if (i > 8 && j == 2) randNum = 5
                // //1-5随机整数（包含1，不含5：1/2/3/4）
                // this.LtkListdata5[i][j] = this.LtkZtList[parseInt(randNum)]
                for (let item of this.newTPList) {
                  if (
                    Number(item.pai) == pai + 5 &&
                    Number(item.ceng) == Math.abs(2 - j + 1) &&
                    Number(item.lie) == i
                  ) {
                    this.LtkListdata5[i][j] = item
                    break
                  }
                }
              }
            }
          }
        } else {
          for (var i = 0; i < 11; i++) {
            this.LtkListdata6[i] = new Array()
            for (var j = 0; j < 2; j++) {
              if (i == 0) {
                this.LtkListdata6[0][j] = Math.abs(-1 - j) + '层'
              } else {
                // var randNum = Math.random() * 15 + 0
                // if (randNum >= 5) {
                //   randNum = 0
                // }
                // //1-5随机整数（包含1，不含5：1/2/3/4）
                // this.LtkListdata6[i][j] = this.LtkZtList[parseInt(randNum)]
                for (let item of this.newTPList) {
                  if (
                    Number(item.pai) == pai + 5 &&
                    Number(item.ceng) == Math.abs(-1 - j) &&
                    Number(item.lie) == i
                  ) {
                    this.LtkListdata6[i][j] = item
                    break
                  }
                }
              }
            }
          }
        }
      },
      //绘制轨道线
      drawLTK(IdName) {
        let canvas = document.getElementById(IdName)
        let context = canvas.getContext('2d')
        canvas.width = this.$refs.ltkshowall.offsetWidth
        canvas.height = 30
        //画轨道线
        context.moveTo(0, 15)
        context.lineTo(this.$refs.ltkshowall.offsetWidth - 40, 15)
        context.strokeStyle = '#008CE6'
        context.lineWidth = 3
        context.stroke()
        this.fillText(context, '北', 0, 0, 30, 30, 15, '#008CE6')
        this.fillText(
          context,
          '南',
          this.$refs.ltkshowall.offsetWidth - 40,
          0,
          30,
          30,
          15,
          '#008CE6'
        )
      },
      //绘制轨道线
      drawLTKTP(IdName) {
        let canvas = document.getElementById(IdName)
        let context = canvas.getContext('2d')
        canvas.width = this.$refs.ltkshowallTp.offsetWidth
        canvas.height = 30
        //画轨道线
        context.moveTo(0, 15)
        context.lineTo(this.$refs.ltkshowallTp.offsetWidth - 40, 15)
        context.strokeStyle = '#008CE6'
        context.lineWidth = 3
        context.stroke()
        this.fillText(context, '北', 0, 0, 30, 30, 15, '#008CE6')
        this.fillText(
          context,
          '南',
          this.$refs.ltkshowallTp.offsetWidth - 40,
          0,
          30,
          30,
          15,
          '#008CE6'
        )
      },
      //填充加写字
      fillText(cxt, text, x, y, width, height, radius, fillcolor) {
        cxt.save()
        cxt.translate(x, y)
        cxt.textAlign = 'center'
        cxt.textBaseline = 'middle'
        cxt.font = '16px Arial'
        this.pathRoundRect(cxt, width, height, radius)
        cxt.fillStyle = fillcolor || 'black'
        cxt.fill()
        cxt.fillStyle = '#fff'
        cxt.fillText(text, width / 2, height / 2)
        cxt.restore()
      },
      pathRoundRect(cxt, width, height, radius) {
        cxt.beginPath()
        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
        cxt.lineTo(width - radius, height)
        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
        cxt.lineTo(0, radius)
        cxt.arc(radius, radius, radius, Math.PI, (Math.PI / 2) * 3)
        cxt.lineTo(width - radius, 0)
        cxt.arc(width - radius, radius, radius, (Math.PI / 2) * 3, Math.PI * 2)
        cxt.closePath()
      },
      //改变立体库
      changeLtk(it) {
        this.ltkactive = it
      },
      goAnchor(id) {
        var anchor = document.getElementById(id)
        anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;

    ul > li {
      list-style: none;
    }

    ul {
      padding: 0;
      margin: 0;
    }
  }

  .container-page2 {
    width: inherit;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;

    .top-tab {
      width: 100%;
      height: 0.48rem;
      border: 1px solid rgb(33, 90, 159);
      font-size: 0.16rem;
      line-height: 0.48rem;
      color: rgba($color: #fefefe, $alpha: 0.6);
      display: inline-flex;

      img {
        display: inline-block;
        margin: auto 0.1rem;
      }

      span {
        margin-right: 0.2rem;
        cursor: pointer;
      }

      .ltkactive {
        color: #fff;
        font-size: 0.18rem;
      }
    }

    .container-page2-center {
      width: 100%;
      flex: 1;
      margin-top: 0.1rem;
      display: flex;

      .container-page2-center-left {
        height: 100%;
        display: flex;
        text-align: center;
        color: #fff;
        padding-bottom: 0.1rem;

        span {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-left: 0.4rem;
        }

        .ltkanli {
          display: inline-block;
          width: 0.4rem;
          height: 0.25rem;
          // border: 1px solid rgb(0, 140, 230);
          margin: 0.1rem;
          border-radius: 0.05rem;
        }
      }

      #page2-dqxz {
        margin-left: 0.2rem;
        color: #fff;
      }

      .container-page2-center-right {
        padding-left: 0.15rem;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 0.75rem - 0.5rem - 0.2rem - 0.2rem);
        overflow: hidden;

        .page2-ltkshow-all {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          padding: 0 0.2rem 0 0;
          box-sizing: border-box;

          .lxltk-page1 {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
          }

          .lxltk-page2 {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
          }
        }

        .quweiname {
          width: fit-content;
          height: 98%;
          padding: 0 0.2rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          color: #fff;
          writing-mode: vertical-lr;
          /*从左向右 从右向左是 writing-mode: vertical-rl;*/
          writing-mode: tb-lr;
          font-size: 0.28rem;
          margin: 0.6rem auto;
        }

        .page2-ltkshow-all2 {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          padding: 0 0.2rem 0.2rem;
          box-sizing: border-box;

          .tpltk {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
            margin: auto 0;
          }

          .hang {
            margin-bottom: 0.2rem !important;
          }

          .page2-ltkshow {
            flex: none !important;
          }
        }

        .Ltk-jiange {
          height: 0.6rem;
        }

        .page2-ltkshow {
          flex: 1;
          height: fit-content;
          display: flex;
          padding-top: 0.1rem;
          // margin: 0 auto;

          /* 缩放的原点 */
          // border-left: 25px solid #fff;
          // // border-left-image: url('../../../assets/home-kw-img-01.png') 20px round;
          // -webkit-border-image: url('../../../assets/home-kw-img-01.png') 0 40 round;
          // /* Safari 3.1-5 */
          // -o-border-image: url('../../../assets/home-kw-img-01.png')0 40 round;
          // /* Opera 11-12.1 */
          // border-image: url('../../../assets/home-kw-img-01.png')0 40 round;
          // // border-image-slice: 0.5 0.2;
          .pai {
            width: 0.2rem;
            margin-right: 0.2rem;
            margin-bottom: 0.1rem;
            // background: url('../../../assets/home-kw-img-01.png') no-repeat 100% 100%;
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important;
            border-radius: 0;
          }

          .lie {
            display: flex;
            flex-direction: column;
            // justify-content: space-around;
          }

          .hang {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.1rem;

            span {
              display: inline-block;
              color: #fff;
              font-size: 0.16rem;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .tooltip-btn {
          }

          div {
            margin: 0 auto;
            border-radius: 0.05rem;
          }
        }
      }
    }
  }

  html body div::-webkit-scrollbar-track:hover {
    background: #002349;
  }

  html body div::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  html body div::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
  }

  //弹窗样式
  // .m-tooltip {
  //   display: inline-block;
  // }

  .m-title {
    position: fixed;
    z-index: 999;
    padding-bottom: 0.12rem;
    pointer-events: none;
    opacity: 0;
    transform-origin: 50% 75%;
    transform: scale(0.8); // 缩放变换
    -ms-transform: scale(0.8);
    /* IE 9 */
    -webkit-transform: scale(0.8);
    /* Safari and Chrome */
    transition: transform 0.25s, opacity 0.25s;

    .u-title {
      padding: 0.1rem;
      margin: 0 auto;
      word-break: break-all;
      word-wrap: break-word;
      background: #002349;
      border: 1px solid #215a9f;
      // box-shadow: 0px 0px 7px 1px fade(#fefefe, 36%);
      border-radius: 0.05rem;
      font-weight: 400;
      font-size: 0.16rem;
      line-height: 0.2rem;
      color: #333;
    }

    .m-arrow {
      position: absolute;
      z-index: 9;
      bottom: 0.12rem;
      left: 50%;
      transform: translate(-50%, 100%);
      width: 0.15rem;
      height: 0.1rem;
      border-radius: 0 0 0.05rem 0.05rem;
      overflow: hidden;

      .u-arrow {
        position: absolute;
        left: 50%;
        top: 0px;
        transform: translate(-50%, -50%) rotate(45deg);
        margin: 0 auto;
        width: 11px;
        height: 11px;
        background: #fff;
        border-radius: 0 0 3px 0;
        z-index: 8;
        box-shadow: 1px 1px 3px 1px fade(#fefefe, 10%);
      }
    }
  }

  .show-tip {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1); // 缩放变换
    -ms-transform: scale(1);
    /* IE 9 */
    -webkit-transform: scale(1);
    /* Safari and Chrome */
  }

  .u-content {
    cursor: pointer;
    font-size: 0.14rem;
    line-height: 1.5;
    color: #000000;
    border-radius: 0.05rem;
  }

  .lxltk-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 1rem;
    box-sizing: border-box;

    span {
      display: inline-block;
      width: 0.8rem;
      height: 0.4rem;
      background: rgb(15, 60, 109);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      color: rgb(96, 157, 224);
      border-radius: 4px;
      font-size: 0.16rem;
      line-height: 0.4rem;
      text-align: center;
      margin-right: 0.1rem;
    }
  }

  .lxltk-Btn-active {
    color: #fff !important;
    background: linear-gradient(
      180deg,
      rgba(15, 60, 109, 0) 2.944%,
      rgb(0, 144, 220) 99.519%
    ) !important;
  }
  .el-dropdown {
    color: #409eff !important;
    font-size: 0.16rem;
    margin-left: 0.2rem;
  }
  .el-dropdown-menu--small {
    padding: 6px 0px;
    text-align: left;
    min-width: 1rem;
  }
  .el-dropdown-menu__item {
    font-size: 0.14rem;
    line-height: 0.28rem;
  }
</style>
